<!--
*  2021-03-15
*  更换纱线
-->
<template>
  <div id="app" class="yarn-change">
    <!-- 头部导航 -->
    <van-nav-bar
      left-arrow
      :title="no"
      left-text="返回"
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <!-- 确认信息 -->
    <better-scroll
      class="public-scroll"
      :data="tableData"
      :totalPage="totalPage"
    >
      <van-cell-group>
        <van-cell title="品名">
          <template>
            <van-field v-model="no" />
          </template>
        </van-cell>
        <van-cell title="所需纬纱"></van-cell>
        <van-cell
          v-for="(d, index) in tableData"
          :key="d.id"
          :title="d.standardNo + '(' + d.yarnName + d.yarnNo + ')'"
          :label="d.yarnStandard + '/' + d.yarnStrandNum"
          @click="onClickSearch(index)"
          is-link
        >
          <template>
            <van-field
              v-model="d.yarnBatchLotNum"
              placeholder="请选择批次"
              readonly
            />
          </template>
        </van-cell>
      </van-cell-group>
    </better-scroll>
    <van-button class="yarn-btn" @click="onGetChangeLatYarn">保 存</van-button>

    <!-- 设计单列表 -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelectLotNum"
    />
  </div>
</template>

<script>
import {
  getQueryLatYarn,
  getChangeLatYarn,
  getYarnLotNumList,
} from "@/api/warping";
import { openWin } from "@/utils/index";

export default {
  name: "yarnChange",
  data() {
    return {
      tableData: [],
      totalPage: 1,
      actions: [],
      show: false,
      taskId: "",
      no: "",
      standardId: "",
      greyClothId: "",
      title: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.taskId = window.api.pageParam.taskId;
        that.greyClothId = window.api.pageParam.greyClothId;
        that.onGetTaskYarnData();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      });
    } else {
      window.apiready = () => {
        that.taskId = window.api.pageParam.taskId;
        that.greyClothId = window.api.pageParam.greyClothId;
        that.onGetTaskYarnData();
        // 监听页面消失的时候，关掉页面就可以了
        window.api.addEventListener(
          {
            name: "viewdisappear",
          },
          function () {
            window.api.closeWin();
          }
        );
      };
    }
  },
  methods: {
    // 返回
    onClickLeft() {
      openWin("index");
    },
    // 获取纬纱信息
    onGetTaskYarnData() {
      getQueryLatYarn(
        {
          taskId: this.taskId,
        },
        (res) => {
          console.log(res);
          this.no = res.designNo;
          this.tableData = res.yarn4Lats;
        }
      );
    },
    // 选择批次
    onSelectLotNum(val) {
      this.tableData[this.index].yarnBatchId = val.value;
      this.tableData[this.index].yarnBatchLotNum = val.name;
    },
    // 获取批次
    onGetYarnLotNumList() {
      this.actions = [];
      this.show = false;
      getYarnLotNumList(
        {
          standardId: this.standardId,
        },
        (res) => {
          if (res.length) {
            this.show = true;
            res.forEach((item) => {
              this.actions.push({
                name: item.lotNum,
                value: item.id,
              });
            });
          } else {
            this.$toast.fail('不存在批次')
          }
        }
      );
    },
    // 回车搜索
    onClickSearch(index) {
      this.index = index;
      this.standardId = this.tableData[this.index].yarnId;
      this.onGetYarnLotNumList();
    },
    // 保存
    onGetChangeLatYarn() {
      this.yarn4Lats = [];
      this.tableData.forEach((item) => {
        this.yarn4Lats.push({
          yarnId: item.yarnId,
          yarnBatchId: item.yarnBatchId,
          yarnBatchLotNum: item.yarnBatchLotNum,
          yarnAlias: item.yarnAlias,
        });
      });
      console.log(this.yarn4Lats);
      getChangeLatYarn(
        {
          id: this.greyClothId,
          designNo: this.no,
          yarn4Lats: this.yarn4Lats,
        },
        () => {
          this.$toast({
            type: "success",
            message: "更改成功，请手动更改二维码",
            onClose: () => {
              openWin("index");
            },
          });
        }
      );
    },
  },
};
</script>

<style lang="scss">
.yarn-change {
  display: flex;
  flex-direction: column;
  .public-scroll {
    height: calc(100vh - 200px);
    .van-cell {
      display: flex;
      align-items: center;
      span,
      .van-cell__label {
        font-size: 20px;
      }
    }
  }
  .yarn-btn {
    width: 700px;
    height: 100px;
    background: #1677ff;
    border-radius: 2px;
    font-size: 32px;
    color: #ffffff;
    margin: 0 auto;
  }
  .van-action-sheet {
    max-height: 90%;
  }
  .van-field__control {
    text-align: right;
  }
}
</style>
